<!-- 新闻资讯详情页面 -->
<template>
  <s-layout :title="state.article.title || '文章详情'" :bgStyle="{ color: '#FFF' }">
    <view class="article-detail" v-if="state.article.id">
      <!-- 文章头部信息 -->
      <view class="article-header">
        <view class="article-title">{{ state.article.title }}</view>
        <view class="article-meta">
          <view class="meta-item" v-if="state.article.authorName">
            <text class="meta-label">作者：</text>
            <text class="meta-value">{{ state.article.authorName }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-label">发布时间：</text>
            <text class="meta-value">{{ formatTime(state.article.createTime) }}</text>
          </view>
          <view class="meta-item" v-if="state.article.readCount">
            <text class="meta-label">阅读量：</text>
            <text class="meta-value">{{ state.article.readCount }}</text>
          </view>
        </view>
      </view>
      
      <!-- 分割线 -->
      <view class="divider"></view>
      
      <!-- 文章内容 -->
      <view class="article-content">
        <rich-text 
          :nodes="state.article.content" 
          @tap="handleRichTextTap"
        ></rich-text>
      </view>
      
      <!-- 文章底部操作 -->
     <!-- <view class="article-actions">
        <view class="action-item" @click="handleLike">
          <uni-icons 
            :type="state.article.isLiked ? 'heart-filled' : 'heart'" 
            :color="state.article.isLiked ? '#ff6b6b' : '#999'"
            size="20"
          />
          <text class="action-text">{{ state.article.likeCount || 0 }}</text>
        </view>
        <view class="action-item" @click="handleShare">
          <uni-icons type="redo" color="#999" size="20" />
          <text class="action-text">分享</text>
        </view>
        <view class="action-item" @click="handleCollect">
          <uni-icons 
            :type="state.article.isCollected ? 'star-filled' : 'star'" 
            :color="state.article.isCollected ? '#ffd700' : '#999'"
            size="20"
          />
          <text class="action-text">收藏</text>
        </view>
      </view> -->
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-container" v-else-if="state.loading">
      <uni-load-more status="loading" />
    </view>
    
    <!-- 错误状态 -->
    <view class="error-container" v-else>
      <view class="error-text">文章加载失败</view>
      <button class="retry-btn" @click="getArticleDetail">重试</button>
    </view>
  </s-layout>
</template>

<script setup>
  import { onLoad, onShareAppMessage } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import NewsApi from '@/sheep/api/news/news';
  import { formatDate } from '@/sheep/helper/utils';

  const state = reactive({
    articleId: '',
    loading: true,
    article: {
      id: '',
      title: '',
      authorName: '',
      createTime: '',
      content: '',
      viewCount: 0,
      likeCount: 0,
      isLiked: false,
      isCollected: false,
    },
  });

  // 获取文章详情
  async function getArticleDetail() {
    if (!state.articleId) {
      state.loading = false;
      return;
    }
    
    state.loading = true;
    
    try {
	
      let { code, data } = await NewsApi.getNewsDetail({
        id: state.articleId
      });
      
      if (code === 0 && data) {
        state.article = {
          ...data,
          isLiked: data.isLiked || false,
          isCollected: data.isCollected || false,
        };
        }
        // 增加阅读量
        incrementReadCount();
    } catch (error) {
      console.error('获取文章详情失败:', error);
    } finally {
      state.loading = false;
    }
  }

  // 增加阅读量
  async function incrementReadCount() {
    try {
      await NewsApi.incrementReadCount({
        id: state.articleId
      });
    } catch (error) {
      console.error('增加阅读量失败:', error);
    }
  }

  // 格式化时间
  function formatTime(time) {
    return formatDate(time, 'YYYY-mm-DD hh:MM');
  }

  // 处理富文本点击事件
  function handleRichTextTap(e) {
    // 处理富文本中的链接点击等事件
    console.log('富文本点击事件:', e);
  }

  // 点赞操作
  async function handleLike() {
    try {
      const action = state.article.isLiked ? 'unlike' : 'like';
      let { code } = await NewsApi.likeArticle({
        id: state.articleId,
        action: action
      });
      
      if (code === 0) {
        state.article.isLiked = !state.article.isLiked;
        state.article.likeCount += state.article.isLiked ? 1 : -1;
        
        uni.showToast({
          title: state.article.isLiked ? '点赞成功' : '取消点赞',
          icon: 'success'
        });
      }
    } catch (error) {
      console.error('点赞操作失败:', error);
      uni.showToast({
        title: '操作失败',
        icon: 'error'
      });
    }
  }

  // 收藏操作
  async function handleCollect() {
    try {
      const action = state.article.isCollected ? 'uncollect' : 'collect';
      let { code } = await NewsApi.collectArticle({
        id: state.articleId,
        action: action
      });
      
      if (code === 0) {
        state.article.isCollected = !state.article.isCollected;
        
        uni.showToast({
          title: state.article.isCollected ? '收藏成功' : '取消收藏',
          icon: 'success'
        });
      }
    } catch (error) {
      console.error('收藏操作失败:', error);
      uni.showToast({
        title: '操作失败',
        icon: 'error'
      });
    }
  }

  // 分享操作
  function handleShare() {
    uni.share({
      provider: 'weixin',
      scene: 'WXSceneSession',
      type: 0,
      href: `pages/news/detail/index?id=${state.articleId}`,
      title: state.article.title,
      summary: state.article.summary || '精彩文章分享',
      imageUrl: state.article.cover || '',
      success: function (res) {
        console.log('分享成功:', res);
        uni.showToast({
          title: '分享成功',
          icon: 'success'
        });
      },
      fail: function (err) {
        console.log('分享失败:', err);
        uni.showToast({
          title: '分享失败',
          icon: 'error'
        });
      }
    });
  }

  // 页面加载
  onLoad((options) => {
    if (options.id) {
      state.articleId = options.id;
      getArticleDetail();
    } else {
      state.loading = false;
    }
  });

  // 分享配置
  onShareAppMessage(() => {
    return {
      title: state.article.title || '精彩文章分享',
      path: `/pages/index/news/detail/index?id=${state.articleId}`,
      imageUrl: state.article.cover || ''
    };
  });
</script>

<style lang="scss" scoped>
.article-detail {
  padding: 30rpx;
  background: #fff;
  min-height: 100vh;
}

.article-header {
  margin-bottom: 40rpx;
}

.article-title {
  font-size: 40rpx;
  font-weight: 700;
  color: #333;
  line-height: 1.4;
  margin-bottom: 30rpx;
}

.article-meta {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.meta-label {
  color: #999;
  margin-right: 10rpx;
}

.meta-value {
  color: #666;
}

.divider {
  height: 2rpx;
  background: #f0f0f0;
  margin: 40rpx 0;
}

.article-content {
  line-height: 1.8;
  font-size: 32rpx;
  color: #333;
  
  :deep(rich-text) {
    img {
      max-width: 100%;
      height: auto;
      border-radius: 8rpx;
      margin: 20rpx 0;
    }
    
    p {
      margin-bottom: 20rpx;
      text-align: justify;
    }
    
    h1, h2, h3, h4, h5, h6 {
      font-weight: 600;
      margin: 30rpx 0 20rpx 0;
      color: #333;
    }
    
    h1 { font-size: 38rpx; }
    h2 { font-size: 36rpx; }
    h3 { font-size: 34rpx; }
    h4 { font-size: 32rpx; }
    h5 { font-size: 30rpx; }
    h6 { font-size: 28rpx; }
    
    blockquote {
      border-left: 4rpx solid #007aff;
      padding-left: 20rpx;
      margin: 20rpx 0;
      background: #f8f9fa;
      padding: 20rpx;
      border-radius: 8rpx;
    }
    
    code {
      background: #f1f3f4;
      padding: 4rpx 8rpx;
      border-radius: 4rpx;
      font-family: 'Courier New', monospace;
      font-size: 28rpx;
    }
    
    pre {
      background: #f8f9fa;
      padding: 20rpx;
      border-radius: 8rpx;
      overflow-x: auto;
      margin: 20rpx 0;
      
      code {
        background: none;
        padding: 0;
      }
    }
  }
}

.article-actions {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 40rpx 0;
  margin-top: 60rpx;
  border-top: 2rpx solid #f0f0f0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 20rpx;
  border-radius: 12rpx;
  transition: all 0.3s ease;
  
  &:active {
    background: #f0f0f0;
    transform: scale(0.95);
  }
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

.loading-container,
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40rpx;
}

.error-text {
  font-size: 32rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.retry-btn {
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
}
</style>

